import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export function useObserver (apiFn) {
  // 监听的目标对象
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        //   传入实参 含有api接口函数的函数
        apiFn()
        // 清除监听视口
        stop()
      }
    },
    { threshold: 0 }
  )
  return {
    target
  }
}

/*
    1.stop 一个可执行的函数用来停止监听行为
    2.target 一个由ref api调用之后形成的RefImpl对象 也可以是一个dom对象
    3.isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
    特别注意: 对于目标target是否进入视口区域的监听会一直进行不会只监听一次
  */
